<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>分析生命周期</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<!-- 准备好一个容器-->
	<div id="root">
		<h2 id="h2">当前页面求和为：{{sum}}</h2>
		<button @click="add" id="btn">点我+1</button>
		<button @click="death">销毁</button>
	</div>

	<script type="text/javascript">
		//修改Vue的全局配置
		Vue.config.productionTip = false //关闭生产提示

		const vm = new Vue({
			el: '#root',
			data: {
				sum: 0
			},
			methods: {
				add() {
					console.log('你点了+按钮')
					this.sum += 1
				},
				death() {
					this.$destroy()
				}
			},
			//vue实例初始化前
			beforeCreate() {
				console.log('--beforeCreate--')
				// console.log(this.sum) //undefined
				// console.log(this.add) //undefined
			},
			//vue实例初始化完毕
			created() {
				console.log('--created--')
				// console.log(this.sum) // 0
				// console.log(this.add) // function
				// console.log(this)
				// debugger;
			},
			//vue实例更新真实DOM之前(挂载前)
			beforeMount() {
				console.log('--beforeMount--')
				// const btn = document.getElementById('btn')
				// btn.innerText = '哈哈'
				// const h2 = document.getElementById('h2')
				// console.log(h2)
				// debugger;
			},
			//vue实例更新完真实DOM了(挂载完毕)
			mounted() {
				console.log('--mounted--')
				// const h2 = document.getElementById('h2')
				// const btn = document.getElementById('btn')
				// btn.innerText = '哈哈'
				// console.log(h2)
				// console.log(btn)
			},
			//vue实例将要更新页面
			beforeUpdate() {
				console.log('--beforeUpdate--')
				// console.log(this.sum)
				// debugger;
			},
			//vue实例完成更新页面
			updated() {
				console.log('--updated--')
				// console.log(this.sum)
				// debugger;
			},
			//vue实例销毁前
			beforeDestroy() {
				console.log('--beforeDestroy--')
				// console.log(this.sum) //可以获取
				// console.log(this.add) //可以获取
			},
			//vue实例销毁完毕
			destroyed() {
				console.log('--destroyed--')
				console.log('我移除完毕了所有数据的监视，不会更新页面了')
			},
		})
	</script>
</body>

</html>